<%--
  Created by IntelliJ IDEA.
  User: 25531
  Date: 2021/10/11
  Time: 14:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <link rel="stylesheet" type="text/css" href="./static/css/login.css">
    <script type="text/javascript" src="./static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="bg-container">
    <img src="./static/image/sea.jpg"/>
</div>
<div class="login-container">
    <div class="login login-header">
        <h3 class="text">欢迎登录</h3>
        <p class="text">没有账号？<a href="#">没办法，你不是管理员</a></p>
    </div>
    <div class="login login-main">
        <form method="POST" action="login" class="login-form positionAbsoluteCenter">
            <label for="login-userphone">手机号</label>
            <input type="text" name="userphone" id="login-userphone" placeholder="请输入手机号" required  pattern="1([0-9]){10}" title="请输入正确的手机号">
            <p class="emptyLine"></p>
            <label for="login-password">密　码</label>
            <input type="password" name="password" id="login-password" placeholder="登录密码" required pattern="(\w){6,12}" title="密码应为6-12位任意字母、数字或下划线">
            <p class="emptyLine"></p>
            <label for="login-verifycode">验证码</label>
            <input type="text"  name="verifycode" id="login-verifycode" placeholder="请输入图片验证码" required pattern="(\d|[a-zA-Z]){4}" title="图片验证码应为4位随机数字或字母混合">
            <img  id="login-verifyCodeImg" src="<%= request.getContextPath() %>/getCodeImg">
            <p class="emptyLine" id="emptyLine-code"></p>
            <input type="submit" name="submit" value="登录" disabled="true">
            <p class="emptyLine"></p>
            <input type="checkbox" name="userprotocol" id="login-p-btn" required>
            <label for="login-p-btn" style="color: #666;font-size: 12px;margin-left: 5px;">阅读并接受<a href="#">《用户协议》</a>及<a href="#">《隐私权保护声明》</a></label>
        </form>
    </div>
</div>

<div class="positionAbsoluteCenter reg-text">
	<h3>Roud</h3>
    <h3>创意</h3>
    <p>让平淡的生活更精彩</p>
</div>

<p class="reg-copyright">2021 ©Roud</p>
<script>
    /**
     * @author Roud
     * */

        //当登录注册框要覆盖"创意，..."段落时，段落隐藏；当有足够空间时，又显示
    var regContainer = document.querySelector(".reg-container");
    var loginContainer = document.querySelector(".login-container");
    var regText = document.querySelector(".reg-text");

    setInterval(function f2(){
        var w3 = loginContainer.offsetLeft;
        if(w3!=0){
            if(w3<=488&&w3>0){
                regText.style.display="none";
            }else{
                regText.style.display="block";
            }
        }
    }, 100);


</script>
<script>

    function f4(){
        var logins = document.querySelectorAll(".login-main input[type=text]");
        var loginPwd = document.querySelector(".login-main input[type=password]");
        var loginBtn = document.querySelector(".login-main input[type=submit]");
        if(logins[0].value!="" && logins[1].value!="" && loginPwd.value!=""){
            loginBtn.disabled = false ;
            loginBtn.style.background = "#3f89ec";
        }else{
            loginBtn.disabled = true ;
            loginBtn.style.background = "#BDCEFC";
        }
    }
    setInterval(f4,100);
    //点击更换验证码
    var login_verifyCodeImg = document.querySelector("#login-verifyCodeImg");
    function f5(){
        login_verifyCodeImg.src = "<%= request.getContextPath() %>/getCodeImg?t="+(new Date()).getTime();
    }
    f5();
    login_verifyCodeImg.addEventListener("click",f5);


</script>
</body>
</html>
